import Taro, { Component, Config } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import "./index.less";
import { get } from "../../utils";
import imgSrc from "./img.png";

export default class Index extends Component {
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: "羞羞的卡牌"
  };
  private allData: Array<any>;
  private useId: any[number];
  private availableData: any[];

  constructor() {
    super();
    this.state = {
      curData: null
      // curData: {
      //   type: "1",
      //   value: "这是一个题目"
      // }
    };
    this.allData = [];
    this.useId = [];
    this.availableData = [];
  }

  async getData() {
    const versionLocal = Taro.getStorageSync("version");
    this.useId = Taro.getStorageSync("useId") || [];
    let versionRemote: any = await get(
      "https://gitee.com/bitqiang2016/truthOrDare/raw/master/config/version.json"
    );

    this.allData = Taro.getStorageSync("data");
    // @ts-ignore
    if (
      (versionRemote.version && versionLocal !== versionRemote.version) ||
      !Array.isArray(this.allData) ||
      this.allData.length <= 0
    ) {
      Taro.removeStorageSync("useId");
      let data: any = await get(
        "https://gitee.com/bitqiang2016/truthOrDare/raw/master/config/data.json"
      );
      if (Array.isArray(data.data)) {
        Taro.setStorageSync("version", versionRemote.version);
        Taro.setStorageSync("data", data.data);
        this.allData = data.data;
      }
    }

    this.availableData = this.allData.filter(i => !this.useId.includes(i.id));
  }

  handleCurData() {
    if (this.availableData.length <= 0) {
      this.availableData = JSON.parse(JSON.stringify(this.allData));
      this.useId = [];
    }
    let num = parseInt(String(Math.random() * this.availableData.length), 10);
    let cur = this.availableData[num];
    this.availableData.splice(num, 1);
    this.setState({ curData: cur });
    this.useId.push(cur.id);
    Taro.setStorageSync("useId", this.useId);
  }

  componentWillMount() {
    this.getData();
  }
  render() {
    return (
      <View className='home' onClick={this.handleCurData}>
        <View className='card'>
          <View className='card-border'>
            {this.state.curData ? (
              <View>
                <Text className='title'>
                  {this.state.curData.type === "1" ? "真心话" : "大冒险"}
                </Text>
                <Text className='text-content'>{this.state.curData.value}</Text>
              </View>
            ) : (
              <View className='introduce'>
                <Text className='text-1'>点击卡牌</Text>
                <Text className='text-1'>说羞羞的话</Text>
                <Text className='text-1'>做羞羞的事</Text>
                <Image src={imgSrc} className='img-style' />
              </View>
            )}
          </View>
        </View>
      </View>
    );
  }
}
